<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>企业列表 - 社交平台</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    body {
      background-color: #f8f9fa;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding-bottom: 60px;
    }
    
    /* 顶部导航 */
    .top-nav {
      background-color: white;
      padding: 12px 15px;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .nav-title {
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      margin: 0;
    }
    
    /* 搜索和筛选区 */
    .search-filter {
      padding: 12px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
    }
    
    .search-box {
      position: relative;
      margin-bottom: 10px;
    }
    
    .search-input {
      width: 100%;
      padding: 10px 15px 10px 40px;
      border-radius: 8px;
      border: 1px solid #ddd;
      font-size: 14px;
    }
    
    .search-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
    
    .filter-tags {
      display: flex;
      overflow-x: auto;
      padding-bottom: 5px;
      gap: 8px;
    }
    
    .filter-tag {
      padding: 5px 12px;
      border-radius: 16px;
      font-size: 13px;
      white-space: nowrap;
      background-color: #f0f0f0;
      color: #333;
      cursor: pointer;
    }
    
    .filter-tag.active {
      background-color: #0d6efd;
      color: white;
    }
    
    /* 列表样式切换器 */
    .view-switch {
      display: flex;
      justify-content: flex-end;
      padding: 10px 15px;
      background-color: white;
      border-bottom: 1px solid #eee;
    }
    
    .switch-btn {
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      background-color: #f5f5f5;
      color: #666;
      margin-left: 5px;
    }
    
    .switch-btn.active {
      background-color: #0d6efd;
      color: white;
    }
    
    /* 通用企业列表样式 */
    .enterprise-list {
      padding: 10px 15px;
    }
    
    .list-section-title {
      font-size: 16px;
      font-weight: 600;
      margin: 15px 0 10px;
      color: #333;
    }
    
    /* 卡片式列表 */
    .card-list .enterprise-item {
      background-color: white;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    
    .enterprise-header {
      position: relative;
      height: 140px;
    }
    
    .enterprise-banner {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .no-banner {
      width: 100%;
      height: 100%;
      background-color: #e9f5ff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0d6efd;
      font-size: 32px;
    }
    
    .enterprise-logo {
      position: absolute;
      bottom: -30px;
      left: 15px;
      width: 60px;
      height: 60px;
      border-radius: 8px;
      border: 3px solid white;
      object-fit: cover;
    }
    
    .no-logo {
      position: absolute;
      bottom: -30px;
      left: 15px;
      width: 60px;
      height: 60px;
      border-radius: 8px;
      border: 3px solid white;
      background-color: #f1f3f5;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #495057;
      font-size: 20px;
    }
    
    .enterprise-body {
      padding: 35px 15px 15px;
    }
    
    .enterprise-title {
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 5px;
      color: #333;
    }
    
    .enterprise-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      font-size: 12px;
      color: #666;
      margin-bottom: 8px;
    }
    
    .enterprise-desc {
      font-size: 13px;
      color: #555;
      line-height: 1.4;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .enterprise-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 10px;
    }
    
    .enterprise-tag {
      font-size: 12px;
      padding: 2px 8px;
      background-color: #f0f7ff;
      color: #0d6efd;
      border-radius: 4px;
    }
    
    .enterprise-actions {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .follow-btn {
      font-size: 13px;
      padding: 5px 15px;
      border-radius: 20px;
    }
    
    .contact-btn {
      font-size: 13px;
      padding: 5px 15px;
      border-radius: 20px;
    }
    
    /* 简约列表 */
    .simple-list .enterprise-item {
      background-color: white;
      border-radius: 10px;
      padding: 12px;
      margin-bottom: 10px;
      display: flex;
      box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    }
    
    .simple-logo {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      object-fit: cover;
      margin-right: 12px;
      flex-shrink: 0;
    }
    
    .simple-no-logo {
      width: 50px;
      height: 50px;
      border-radius: 6px;
      background-color: #f1f3f5;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #495057;
      font-size: 18px;
      margin-right: 12px;
      flex-shrink: 0;
    }
    
    .simple-info {
      flex: 1;
      min-width: 0;
    }
    
    .simple-title {
      font-size: 15px;
      font-weight: 600;
      margin-bottom: 3px;
      color: #333;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .simple-meta {
      font-size: 12px;
      color: #666;
      margin-bottom: 4px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .simple-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }
    
    .simple-tag {
      font-size: 11px;
      padding: 1px 6px;
      background-color: #f0f7ff;
      color: #0d6efd;
      border-radius: 3px;
    }
    
    .simple-actions {
      display: flex;
      align-items: center;
    }
    
    /* 网格列表 */
    .grid-list {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
    }
    
    .grid-list .enterprise-item {
      background-color: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }
    
    .grid-media {
      height: 100px;
      position: relative;
    }
    
    .grid-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .grid-no-img {
      width: 100%;
      height: 100%;
      background-color: #e9f5ff;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #0d6efd;
      font-size: 24px;
    }
    
    .grid-multi-img {
      position: relative;
    }
    
    .grid-multi-img::after {
      content: "+" attr(data-count);
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.6);
      color: white;
      font-size: 12px;
      padding: 2px 6px;
      border-radius: 4px 0 0 0;
    }
    
    .grid-body {
      padding: 10px;
    }
    
    .grid-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 5px;
      color: #333;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .grid-meta {
      font-size: 11px;
      color: #666;
      margin-bottom: 5px;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    
    .grid-follow {
      font-size: 12px;
      padding: 3px 0;
      text-align: center;
      border-radius: 4px;
      border: 1px solid #0d6efd;
      color: #0d6efd;
    }
    
    .grid-follow.followed {
      background-color: #0d6efd;
      color: white;
    }
    
    /* 底部导航 */
    .bottom-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: white;
      border-top: 1px solid #eee;
      display: flex;
      padding: 8px 0;
      z-index: 1000;
    }
    
    .nav-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #999;
      font-size: 10px;
    }
    
    .nav-item.active {
      color: #0d6efd;
    }
    
    .nav-icon {
      font-size: 20px;
      margin-bottom: 3px;
    }
    
    /* 空状态 */
    .empty-state {
      text-align: center;
      padding: 60px 20px;
      color: #999;
    }
    
    .empty-state i {
      font-size: 56px;
      margin-bottom: 15px;
      opacity: 0.5;
    }
  </style>
</head>
<body>
  <!-- 顶部导航 -->
  <div class="top-nav d-flex justify-content-between align-items-center">
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-arrow-left"></i>
    </button>
    <h1 class="nav-title">企业列表</h1>
    <button class="btn btn-link p-0 text-dark">
      <i class="fa fa-filter"></i>
    </button>
  </div>
  
  <!-- 搜索和筛选区 -->
  <div class="search-filter">
    <div class="search-box">
      <i class="fa fa-search search-icon"></i>
      <input type="text" class="search-input" placeholder="搜索企业名称或关键词...">
    </div>
    
    <div class="filter-tags">
      <div class="filter-tag active">全部企业</div>
      <div class="filter-tag">科技</div>
      <div class="filter-tag">金融</div>
      <div class="filter-tag">教育</div>
      <div class="filter-tag">医疗</div>
      <div class="filter-tag">零售</div>
      <div class="filter-tag">餐饮</div>
      <div class="filter-tag">已关注</div>
    </div>
  </div>
  
  <!-- 列表样式切换器 -->
  <div class="view-switch">
    <button class="switch-btn active" id="cardView">
      <i class="fa fa-th-large"></i>
    </button>
    <button class="switch-btn" id="listView">
      <i class="fa fa-list"></i>
    </button>
    <button class="switch-btn" id="gridView">
      <i class="fa fa-th"></i>
    </button>
  </div>
  
  <!-- 企业列表内容区 -->
  <div class="enterprise-list-container">
    <!-- 卡片式列表 -->
    <div class="enterprise-list card-list" id="cardListView">
      <h2 class="list-section-title">推荐企业</h2>
      
      <!-- 有图片的企业 -->
      <div class="enterprise-item">
        <div class="enterprise-header">
          <img src="https://picsum.photos/600/300?random=1" class="enterprise-banner" alt="企业封面">
          <img src="https://picsum.photos/200/200?random=10" class="enterprise-logo" alt="企业logo">
        </div>
        <div class="enterprise-body">
          <h3 class="enterprise-title">科技创新有限公司</h3>
          <div class="enterprise-meta">
            <span><i class="fa fa-map-marker me-1"></i> 北京市海淀区</span>
            <span><i class="fa fa-building me-1"></i> 500-1000人</span>
            <span><i class="fa fa-clock-o me-1"></i> 成立于2010年</span>
          </div>
          <p class="enterprise-desc">
            专注于人工智能和大数据分析的高科技企业，为各行业提供智能化解决方案，拥有多项核心技术专利。
          </p>
          <div class="enterprise-tags">
            <span class="enterprise-tag">人工智能</span>
            <span class="enterprise-tag">大数据</span>
            <span class="enterprise-tag">科技</span>
          </div>
          <div class="enterprise-actions">
            <button class="btn btn-primary follow-btn">关注</button>
            <button class="btn btn-outline-primary contact-btn">联系</button>
          </div>
        </div>
      </div>
      
      <!-- 无图片的企业 -->
      <div class="enterprise-item">
        <div class="enterprise-header">
          <div class="no-banner">
            <i class="fa fa-bank"></i>
          </div>
          <div class="no-logo">
            <i class="fa fa-graduation-cap"></i>
          </div>
        </div>
        <div class="enterprise-body">
          <h3 class="enterprise-title">未来教育集团</h3>
          <div class="enterprise-meta">
            <span><i class="fa fa-map-marker me-1"></i> 上海市浦东新区</span>
            <span><i class="fa fa-building me-1"></i> 1000人以上</span>
            <span><i class="fa fa-clock-o me-1"></i> 成立于2005年</span>
          </div>
          <p class="enterprise-desc">
            致力于K12教育和职业教育的综合性教育集团，拥有线上线下融合的教学体系和优质师资力量。
          </p>
          <div class="enterprise-tags">
            <span class="enterprise-tag">教育</span>
            <span class="enterprise-tag">培训</span>
            <span class="enterprise-tag">在线教育</span>
          </div>
          <div class="enterprise-actions">
            <button class="btn btn-primary follow-btn">关注</button>
            <button class="btn btn-outline-primary contact-btn">联系</button>
          </div>
        </div>
      </div>
      
      <!-- 有多张图片的企业 -->
      <div class="enterprise-item">
        <div class="enterprise-header">
          <img src="https://picsum.photos/600/300?random=2" class="enterprise-banner" alt="企业封面">
          <img src="https://picsum.photos/200/200?random=11" class="enterprise-logo" alt="企业logo">
        </div>
        <div class="enterprise-body">
          <h3 class="enterprise-title">环球餐饮管理有限公司</h3>
          <div class="enterprise-meta">
            <span><i class="fa fa-map-marker me-1"></i> 广州市天河区</span>
            <span><i class="fa fa-building me-1"></i> 5000人以上</span>
            <span><i class="fa fa-clock-o me-1"></i> 成立于2015年</span>
          </div>
          <p class="enterprise-desc">
            经营多个餐饮品牌的连锁企业，涵盖中餐、西餐、快餐等多种类型，在全国拥有500多家门店。
          </p>
          <div class="enterprise-tags">
            <span class="enterprise-tag">餐饮</span>
            <span class="enterprise-tag">连锁</span>
            <span class="enterprise-tag">美食</span>
          </div>
          <div class="enterprise-actions">
            <button class="btn btn-success follow-btn">已关注</button>
            <button class="btn btn-outline-primary contact-btn">联系</button>
          </div>
        </div>
      </div>
      
      <h2 class="list-section-title">附近企业</h2>
      
      <div class="enterprise-item">
        <div class="enterprise-header">
          <img src="https://picsum.photos/600/300?random=3" class="enterprise-banner" alt="企业封面">
          <img src="https://picsum.photos/200/200?random=12" class="enterprise-logo" alt="企业logo">
        </div>
        <div class="enterprise-body">
          <h3 class="enterprise-title">健康医疗科技中心</h3>
          <div class="enterprise-meta">
            <span><i class="fa fa-map-marker me-1"></i> 深圳市南山区</span>
            <span><i class="fa fa-building me-1"></i> 100-500人</span>
            <span><i class="fa fa-clock-o me-1"></i> 成立于2018年</span>
          </div>
          <p class="enterprise-desc">
            专注于健康管理和医疗科技研发的企业，提供智能医疗设备和健康管理服务。
          </p>
          <div class="enterprise-tags">
            <span class="enterprise-tag">医疗</span>
            <span class="enterprise-tag">健康</span>
            <span class="enterprise-tag">科技</span>
          </div>
          <div class="enterprise-actions">
            <button class="btn btn-primary follow-btn">关注</button>
            <button class="btn btn-outline-primary contact-btn">联系</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 简约列表 (默认隐藏) -->
    <div class="enterprise-list simple-list" id="simpleListView" style="display: none;">
      <h2 class="list-section-title">推荐企业</h2>
      
      <!-- 有图片的企业 -->
      <div class="enterprise-item">
        <img src="https://picsum.photos/200/200?random=10" class="simple-logo" alt="企业logo">
        <div class="simple-info">
          <h3 class="simple-title">科技创新有限公司</h3>
          <div class="simple-meta">
            <i class="fa fa-map-marker me-1"></i> 北京市海淀区 · <i class="fa fa-building me-1"></i> 500-1000人
          </div>
          <div class="simple-tags">
            <span class="simple-tag">人工智能</span>
            <span class="simple-tag">大数据</span>
          </div>
        </div>
        <div class="simple-actions">
          <button class="btn btn-primary btn-sm rounded-pill">关注</button>
        </div>
      </div>
      
      <!-- 无图片的企业 -->
      <div class="enterprise-item">
        <div class="simple-no-logo">
          <i class="fa fa-graduation-cap"></i>
        </div>
        <div class="simple-info">
          <h3 class="simple-title">未来教育集团</h3>
          <div class="simple-meta">
            <i class="fa fa-map-marker me-1"></i> 上海市浦东新区 · <i class="fa fa-building me-1"></i> 1000人以上
          </div>
          <div class="simple-tags">
            <span class="simple-tag">教育</span>
            <span class="simple-tag">在线教育</span>
          </div>
        </div>
        <div class="simple-actions">
          <button class="btn btn-primary btn-sm rounded-pill">关注</button>
        </div>
      </div>
      
      <!-- 有多张图片的企业 -->
      <div class="enterprise-item">
        <img src="https://picsum.photos/200/200?random=11" class="simple-logo" alt="企业logo">
        <div class="simple-info">
          <h3 class="simple-title">环球餐饮管理有限公司</h3>
          <div class="simple-meta">
            <i class="fa fa-map-marker me-1"></i> 广州市天河区 · <i class="fa fa-building me-1"></i> 5000人以上
          </div>
          <div class="simple-tags">
            <span class="simple-tag">餐饮</span>
            <span class="simple-tag">连锁</span>
          </div>
        </div>
        <div class="simple-actions">
          <button class="btn btn-success btn-sm rounded-pill">已关注</button>
        </div>
      </div>
      
      <h2 class="list-section-title">附近企业</h2>
      
      <div class="enterprise-item">
        <img src="https://picsum.photos/200/200?random=12" class="simple-logo" alt="企业logo">
        <div class="simple-info">
          <h3 class="simple-title">健康医疗科技中心</h3>
          <div class="simple-meta">
            <i class="fa fa-map-marker me-1"></i> 深圳市南山区 · <i class="fa fa-building me-1"></i> 100-500人
          </div>
          <div class="simple-tags">
            <span class="simple-tag">医疗</span>
            <span class="simple-tag">健康</span>
          </div>
        </div>
        <div class="simple-actions">
          <button class="btn btn-primary btn-sm rounded-pill">关注</button>
        </div>
      </div>
    </div>
    
    <!-- 网格列表 (默认隐藏) -->
    <div class="enterprise-list grid-list" id="gridListView" style="display: none;">
      <!-- 有图片的企业 -->
      <div class="enterprise-item">
        <div class="grid-media">
          <img src="https://picsum.photos/400/300?random=20" class="grid-img" alt="企业图片">
        </div>
        <div class="grid-body">
          <h3 class="grid-title">科技创新有限公司</h3>
          <div class="grid-meta">
            <i class="fa fa-map-marker me-1"></i> 北京市海淀区
          </div>
          <div class="grid-follow">关注</div>
        </div>
      </div>
      
      <!-- 无图片的企业 -->
      <div class="enterprise-item">
        <div class="grid-media">
          <div class="grid-no-img">
            <i class="fa fa-graduation-cap"></i>
          </div>
        </div>
        <div class="grid-body">
          <h3 class="grid-title">未来教育集团</h3>
          <div class="grid-meta">
            <i class="fa fa-map-marker me-1"></i> 上海市浦东新区
          </div>
          <div class="grid-follow">关注</div>
        </div>
      </div>
      
      <!-- 有多张图片的企业 -->
      <div class="enterprise-item">
        <div class="grid-media grid-multi-img" data-count="3">
          <img src="https://picsum.photos/400/300?random=21" class="grid-img" alt="企业图片">
        </div>
        <div class="grid-body">
          <h3 class="grid-title">环球餐饮管理有限公司</h3>
          <div class="grid-meta">
            <i class="fa fa-map-marker me-1"></i> 广州市天河区
          </div>
          <div class="grid-follow followed">已关注</div>
        </div>
      </div>
      
      <!-- 有图片的企业 -->
      <div class="enterprise-item">
        <div class="grid-media grid-multi-img" data-count="2">
          <img src="https://picsum.photos/400/300?random=22" class="grid-img" alt="企业图片">
        </div>
        <div class="grid-body">
          <h3 class="grid-title">健康医疗科技中心</h3>
          <div class="grid-meta">
            <i class="fa fa-map-marker me-1"></i> 深圳市南山区
          </div>
          <div class="grid-follow">关注</div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <a href="#" class="nav-item">
      <i class="fa fa-home nav-icon"></i>
      <span>首页</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-compass nav-icon"></i>
      <span>发现</span>
    </a>
    <a href="#" class="nav-item active">
      <i class="fa fa-building nav-icon"></i>
      <span>企业</span>
    </a>
    <a href="#" class="nav-item">
      <i class="fa fa-user nav-icon"></i>
      <span>我的</span>
    </a>
  </div>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 列表视图切换
    const cardViewBtn = document.getElementById('cardView');
    const listViewBtn = document.getElementById('listView');
    const gridViewBtn = document.getElementById('gridView');
    
    const cardListView = document.getElementById('cardListView');
    const simpleListView = document.getElementById('simpleListView');
    const gridListView = document.getElementById('gridListView');
    
    cardViewBtn.addEventListener('click', function() {
      // 更新按钮状态
      updateViewButtons(cardViewBtn);
      // 显示卡片视图，隐藏其他视图
      cardListView.style.display = 'block';
      simpleListView.style.display = 'none';
      gridListView.style.display = 'none';
    });
    
    listViewBtn.addEventListener('click', function() {
      // 更新按钮状态
      updateViewButtons(listViewBtn);
      // 显示列表视图，隐藏其他视图
      cardListView.style.display = 'none';
      simpleListView.style.display = 'block';
      gridListView.style.display = 'none';
    });
    
    gridViewBtn.addEventListener('click', function() {
      // 更新按钮状态
      updateViewButtons(gridViewBtn);
      // 显示网格视图，隐藏其他视图
      cardListView.style.display = 'none';
      simpleListView.style.display = 'none';
      gridListView.style.display = 'grid';
    });
    
    // 更新视图按钮的激活状态
    function updateViewButtons(activeBtn) {
      [cardViewBtn, listViewBtn, gridViewBtn].forEach(btn => {
        btn.classList.remove('active');
      });
      activeBtn.classList.add('active');
    }
    
    // 筛选标签切换
    document.querySelectorAll('.filter-tag').forEach(tag => {
      tag.addEventListener('click', function() {
        document.querySelectorAll('.filter-tag').forEach(t => {
          t.classList.remove('active');
        });
        this.classList.add('active');
        // 模拟筛选
        filterEnterprises(this.textContent);
      });
    });
    
    // 关注按钮交互
    document.querySelectorAll('.follow-btn, .grid-follow').forEach(btn => {
      btn.addEventListener('click', function() {
        if (this.textContent.trim() === '关注' || this.textContent.trim() === '关注') {
          this.textContent = '已关注';
          if (this.classList.contains('follow-btn')) {
            this.classList.remove('btn-primary');
            this.classList.add('btn-success');
          } else if (this.classList.contains('grid-follow')) {
            this.classList.add('followed');
          }
        } else {
          this.textContent = '关注';
          if (this.classList.contains('follow-btn')) {
            this.classList.remove('btn-success');
            this.classList.add('btn-primary');
          } else if (this.classList.contains('grid-follow')) {
            this.classList.remove('followed');
          }
        }
      });
    });
    
    // 模拟企业筛选
    function filterEnterprises(filterText) {
      // 在实际应用中，这里会根据筛选条件更新企业列表
      console.log('筛选条件: ' + filterText);
      
      // 简单模拟筛选结果变化的视觉反馈
      const allItems = document.querySelectorAll('.enterprise-item');
      allItems.forEach(item => {
        item.style.opacity = '0.6';
        setTimeout(() => {
          item.style.opacity = '1';
        }, 300);
      });
    }
    
    // 搜索功能
    document.querySelector('.search-input').addEventListener('input', function() {
      const searchText = this.value.toLowerCase();
      console.log('搜索内容: ' + searchText);
      // 实际应用中，这里会根据搜索内容过滤企业列表
    });
  </script>
</body>
</html>
